/**
 * Created by Ysssssss on 2021/4/22.
 */
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';
import { Button } from "antd";
import {OrderStatusSteps} from "@common/presentational/CustomizeSteps";
import DoubleCheck from "@common/presentational/DoubleCheck";
import {connect} from "react-redux";
import { refundOrder, refundOrderAgain } from "@sagas/shoppingMall/shoppingMallOrder";
import {SHOPPING_MALL_AFTER_SALES_STATUS_CODE} from "@constants/ShoppingMallOrderStatus";

let getStatusStepTemplateMap = (current, orderDetail) => ({
    apply: index => ({
        statusStr:"客户申请售后",
        ...(current > index ? {
            time: orderDetail.apply_time,
        } : {})
    }),
    audit: index => ({
        statusStr:"客户审核",
        ...(current > index ? {
            time: orderDetail.review_time,
        } : {})
    }),
    refund: index => ({
        statusStr:"客户退货",
        ...(current > index ? {
            time: orderDetail.deliver_time,
        } : {})
    }),
    check: index => ({
        statusStr:"仓库验收",
        ...(current > index ? {
            time: orderDetail.receive_time,
        } : {})
    }),
    success: index => ({
        statusStr:"退款成功",
        ...(current > index ? {
            time: orderDetail.complete_time,
        } : {})
    }),
    reject: index => ({
        statusStr:"已拒绝",
        ...(current > index ? {
            time: orderDetail.review_time || orderDetail.receive_time,
        } : {})
    }),
    close: index => ({
        statusStr:"已关闭",
        ...(current > index ? {
            time: orderDetail.complete_time,
        } : {})
    })
})

@connect(null, {
    refundOrder,
    refundOrderAgain
})

class ShoppingMallAfterSalesOrderDetailStatus extends PureComponent {
    static propTypes = {
        orderDetail: PropTypes.object,
    }
    constructor(props) {
        super(props);
    }

    statusRender () {
        const { orderDetail } = this.props
        if (orderDetail.type === 2) return this.refundWithDeliverStatusRender(orderDetail)
        return this.refundWithoutDeliverStatusRender(orderDetail)
    }

    refundOrder (record) {
        this.props.refundOrder({
            applyNumber: record.apply_number,
            approve: true,
        }, this.props.getOrderDetail)
    }

    rejectRefundOrder (record) {
        const { apply_number } = record
        this.shoppingMallRefundRejectReasonModalRef.current?.show({ applyNumber: apply_number })
    }

    refundOrderAgain (record) {
        this.props.refundOrderAgain({
            applyNumber: record.apply_number,
        }, () => {
            this.getTableInfo()
        })
    }

    markRefundAsSuccess (record) {
        this.props.refundOrderAgain({
            applyNumber: record.apply_number,
            marked: 1,
        }, () => {
            this.getTableInfo()
        })
    }

    refundWithDeliverStatusRender (orderDetail) {
        let statusStr = ''
        let statusInfo = null
        let steps = {}
        switch(orderDetail.status) {
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['applying']:
                statusStr = '待商家审核'
                statusInfo = (
                    <div className="mgt-48">
                        <DoubleCheck title="是否确认退款"
                                     onClick={this.refundOrder.bind(this, orderDetail)}
                        >
                            <Button type="primary" className="button-small mgr-12">同意</Button>
                        </DoubleCheck>
                        <Button type="danger" ghost className="button-small"
                                onClick={this.rejectRefundOrder.bind(this,orderDetail)}
                        >拒绝</Button>
                    </div>
                )
                steps = {
                    current: 3,
                    stepKeys: ['apply', 'audit', 'refund', 'check', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['rejected']:
                statusStr = '已拒绝'
                statusInfo =  (
                    <div className="mgt-16">
                        <div className="ft-12">原因：{ orderDetail.review_reason }</div>
                    </div>
                )
                steps = {
                    current: 3,
                    stepKeys: ['apply', 'reject']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['warehouse_rejected']:
                statusStr = '已拒绝'
                statusInfo =  (
                    <div className="mgt-16">
                        <div className="ft-12">原因：{ orderDetail.reject_reason }</div>
                    </div>
                )
                steps = {
                    current: 3,
                    stepKeys: ['apply', 'audit', 'refund', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['success']:
                statusStr = '退款成功'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">将原路退回至客户的付款账户</div>
                    </div>
                )
                steps = {
                    current: 6,
                    stepKeys: ['apply', 'audit', 'refund', 'check', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['failed']:
                statusStr = '退款失败'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">失败原因：{orderDetail.failed_reason}</div>
                        <div className="mgt-8 flex-vertical-center">
                            <Button type="primary" className="button-small mgr-12"
                                    onClick={this.refundOrderAgain.bind(this, orderDetail)}
                            >退款重试</Button>
                            <Button type="danger" ghost className="button-small"
                                    onClick={this.markRefundAsSuccess.bind(this, orderDetail)}
                            >标记成功</Button>
                        </div>
                    </div>
                )
                steps = {
                    current: 6,
                    stepKeys: ['apply', 'audit', 'refund', 'check', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['await_return']:
                statusStr = '待客户寄回'
                statusInfo = null
                steps = {
                    current: 3,
                    stepKeys: ['apply', 'audit', 'refund', 'check', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['await_store']:
                statusStr = '待仓库入库'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">仓库：{orderDetail.warehouse_name}</div>
                    </div>
                )
                steps = {
                    current: 4,
                    stepKeys: ['apply', 'audit', 'refund', 'check', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['closed']:
                statusStr = '已关闭'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">退款关闭</div>
                    </div>
                )
                steps = {
                    current: 5,
                    stepKeys: ['apply', 'close']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['await_refund']:
                statusStr = '系统退款中'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">将原路退回至客户的付款账户</div>
                    </div>
                )
                steps = {
                    current: 5,
                    stepKeys: ['apply', 'audit', 'refund', 'check', 'success']
                }
                break;
            default:
                break
        }
        return {
            statusStr,
            statusInfo,
            steps
        }
    }

    refundWithoutDeliverStatusRender (orderDetail) {
        let statusStr = ''
        let statusInfo = null
        let steps = {}
        switch(orderDetail.status) {
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['applying']:
                statusStr = '待商家审核'
                statusInfo = (
                    <div className="mgt-48">
                        <DoubleCheck title="是否确认退款"
                                     onClick={this.refundOrder.bind(this, orderDetail)}
                        >
                            <Button type="primary" className="button-small mgr-12">同意</Button>
                        </DoubleCheck>
                        <Button type="danger" ghost className="button-small"
                                onClick={this.rejectRefundOrder.bind(this,orderDetail)}
                        >拒绝</Button>
                    </div>
                )
                steps = {
                    current: 3,
                    stepKeys: ['apply', 'audit', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['reject']:
                statusStr = '已拒绝'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">原因：{ orderDetail.reject_reason }</div>
                    </div>
                )
                steps = {
                    current: 3,
                    stepKeys: ['apply', 'reject']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['success']:
                statusStr = '退款成功'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">将原路退回至客户的付款账户</div>
                    </div>
                )
                steps = {
                    current: 4,
                    stepKeys: ['apply', 'audit', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['failed']:
                statusStr = '退款失败'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">失败原因：{orderDetail.failed_reason}</div>
                        <div className="mgt-8 flex-vertical-center">
                            <Button type="primary" className="button-small mgr-12"
                                    onClick={this.refundOrderAgain.bind(this, orderDetail)}
                            >退款重试</Button>
                            <Button type="danger" ghost className="button-small"
                                    onClick={this.markRefundAsSuccess.bind(this, orderDetail)}
                            >标记成功</Button>
                        </div>
                    </div>
                )
                steps = {
                    current: 4,
                    stepKeys: ['apply', 'audit', 'success']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['closed']:
                statusStr = '已关闭'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">退款关闭</div>
                    </div>
                )
                steps = {
                    current: 5,
                    stepKeys: ['apply', 'close']
                }
                break;
            case SHOPPING_MALL_AFTER_SALES_STATUS_CODE['await_refund']:
                statusStr = '系统退款中'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12">将原路退回至客户的付款账户</div>
                    </div>
                )
                steps = {
                    current: 3,
                    stepKeys: ['apply', 'audit', 'success']
                }
                break;
            default:
                break
        }
        return {
            statusStr,
            statusInfo,
            steps
        }
    }

    render () {
        const { orderDetail } = this.props
        const { statusStr, statusInfo, steps } = this.statusRender()
        const { current = 1, stepKeys = [] } = steps
        let stepsMap = getStatusStepTemplateMap(current, orderDetail)
        return (
            <div className="detail-box flex-row-between">
                <div className="max-w-quarter-2">
                    <div className="ft-20 ft-clr-d">{ statusStr }</div>
                    { statusInfo }
                </div>
                <OrderStatusSteps
                    current={current}
                    stepList={stepKeys.map((key, index) => stepsMap[key](index))}
                />
            </div>
        )
    }
}

export default ShoppingMallAfterSalesOrderDetailStatus